<template>
  <div class="header_wrapper" :class="drawer ? 'isDrawer' : ''">
    <a aria-current="page" class="logo" href="/">
      <svg width="100%" height="100%" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M66 17H94V41H66V17ZM55 24.2466C33.2095 33.8594 18 55.6533 18 81C18 115.242 45.7583 143 80 143C114.242 143 142 115.242 142 81C142 55.6533 126.791 33.8594 105 24.2466V37.689C119.945 46.334 130 62.4927 130 81C130 108.614 107.614 131 80 131C52.3857 131 30 108.614 30 81C30 62.4927 40.0552 46.334 55 37.689V24.2466Z"
          fill="url(#paint0_linear_5371_6745)" />
        <path d="M89 56H71V115H89V56Z" fill="url(#paint1_linear_5371_6745)" />
        <defs>
          <linearGradient id="paint0_linear_5371_6745" x1="80" y1="17" x2="80" y2="143" gradientUnits="userSpaceOnUse">
            <stop stop-color="#30D7F1" />
            <stop offset="0.509925" stop-color="#80F94B" />
            <stop offset="1" stop-color="#F9E444" />
          </linearGradient>
          <linearGradient id="paint1_linear_5371_6745" x1="80" y1="17" x2="80" y2="115" gradientUnits="userSpaceOnUse">
            <stop stop-color="#30D7F1" />
            <stop offset="0.459849" stop-color="#79FA4B" />
            <stop offset="1" stop-color="#F9E344" />
          </linearGradient>
        </defs>
      </svg>

    </a>
    <div class="desktopMenu">
      <!--      --------------------------  -->
      <div class="headerDropdown">
        <div class="dropdownButton">
          {{ $t('headMenu1') }}
          <svg viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="dropdown_icon">
            <path d="M1 0.867188L4.12445 3.99187C4.20255 4.06998 4.32919 4.06998 4.4073 3.99187L7.53198 0.867188">
            </path>
          </svg>
        </div>
        <div class="dropdown_container">
          <div class="content_wrapper">
            <div class="content_title">
              <svg viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg" class="boost_logo">
                <path
                  d="M8.34198 0.981145C9.13312 0.487879 10.1363 0.489123 10.9262 0.984351L19.6294 6.4407C20.7928 7.17008 20.7896 8.86615 19.6235 9.59118L10.6131 15.1935C10.014 15.566 9.25557 15.5669 8.65561 15.1958L4.91518 12.8821C3.88834 12.2469 3.88834 10.7534 4.91518 10.1183L8.65561 7.80459C9.25556 7.43348 10.014 7.43436 10.6131 7.80686L14.3393 10.1237C14.4245 10.1766 14.4894 10.2681 14.4553 10.3625C14.3373 10.6891 13.7493 11.0312 13.2191 11.0211C13.1656 11.0201 13.1142 11.002 13.0687 10.9737L9.87766 8.98966C9.72789 8.89654 9.53828 8.89632 9.38829 8.98909L5.64786 11.3028C5.50117 11.3935 5.50117 11.6069 5.64786 11.6976L9.38829 14.0113C9.53828 14.104 9.72789 14.1038 9.87766 14.0107L18.8881 8.40838C19.1796 8.22712 19.1804 7.8031 18.8895 7.62076L10.1864 2.16441C9.84789 1.95217 9.41794 1.95163 9.07888 2.16303L1.99708 6.59044C1.8859 6.65995 1.74482 6.65999 1.6336 6.59055L0.732883 6.02822C0.625346 5.96108 0.625305 5.8045 0.732806 5.73731L8.34198 0.981145Z">
                </path>
                <path
                  d="M16.4178 13.056C16.3515 13.0148 16.2988 12.9525 16.2822 12.8762C16.1581 12.3039 16.6751 11.9663 17.0241 11.8819C17.0961 11.8644 17.1705 11.884 17.2334 11.9231L19.6235 13.4092C20.7896 14.1342 20.7928 15.8303 19.6294 16.5597L10.9269 22.0156C10.1365 22.5111 9.13263 22.5121 8.34134 22.018L0.73301 17.2677C0.625443 17.2006 0.625445 17.0439 0.733014 16.9768L1.63331 16.4147C1.74448 16.3453 1.88546 16.3453 1.99662 16.4147L9.07897 20.8366C9.41809 21.0483 9.84833 21.0479 10.1871 20.8355L18.8895 15.3796C19.1804 15.1973 19.1796 14.7732 18.8881 14.592L16.4178 13.056Z">
                </path>
              </svg>
              {{ $t('headMenu1') }}
            </div>
            <div class="content_con">
              <div class="content_subsection">
                <div class="content_links">
                  <div class="links_wrapper link_item link_item2" style="--progress: 100%"
                    @mouseenter="mouseLeaveHandle" @mouseleave="mouseEnterHandle">
                    <img
                      src=""
                      alt="Overview" />
                      <div class="link_head">
                      {{ $t("headMenu1Head1") }}
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_linkDesc">
                      {{ $t('headMenu1Desc1') }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content_wrapper">
            <div class="content_title">
              <svg viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg" class="title_svg_1">
                <path
                  d="M8.34198 0.981145C9.13312 0.487879 10.1363 0.489123 10.9262 0.984351L19.6294 6.4407C20.7928 7.17008 20.7896 8.86615 19.6235 9.59118L10.6131 15.1935C10.014 15.566 9.25557 15.5669 8.65561 15.1958L4.91518 12.8821C3.88834 12.2469 3.88834 10.7534 4.91518 10.1183L8.65561 7.80459C9.25556 7.43348 10.014 7.43436 10.6131 7.80686L14.3393 10.1237C14.4245 10.1766 14.4894 10.2681 14.4553 10.3625C14.3373 10.6891 13.7493 11.0312 13.2191 11.0211C13.1656 11.0201 13.1142 11.002 13.0687 10.9737L9.87766 8.98966C9.72789 8.89654 9.53828 8.89632 9.38829 8.98909L5.64786 11.3028C5.50117 11.3935 5.50117 11.6069 5.64786 11.6976L9.38829 14.0113C9.53828 14.104 9.72789 14.1038 9.87766 14.0107L18.8881 8.40838C19.1796 8.22712 19.1804 7.8031 18.8895 7.62076L10.1864 2.16441C9.84789 1.95217 9.41794 1.95163 9.07888 2.16303L1.99708 6.59044C1.8859 6.65995 1.74482 6.65999 1.6336 6.59055L0.732883 6.02822C0.625346 5.96108 0.625305 5.8045 0.732806 5.73731L8.34198 0.981145Z">
                </path>
                <path
                  d="M16.4178 13.056C16.3515 13.0148 16.2988 12.9525 16.2822 12.8762C16.1581 12.3039 16.6751 11.9663 17.0241 11.8819C17.0961 11.8644 17.1705 11.884 17.2334 11.9231L19.6235 13.4092C20.7896 14.1342 20.7928 15.8303 19.6294 16.5597L10.9269 22.0156C10.1365 22.5111 9.13263 22.5121 8.34134 22.018L0.73301 17.2677C0.625443 17.2006 0.625445 17.0439 0.733014 16.9768L1.63331 16.4147C1.74448 16.3453 1.88546 16.3453 1.99662 16.4147L9.07897 20.8366C9.41809 21.0483 9.84833 21.0479 10.1871 20.8355L18.8895 15.3796C19.1804 15.1973 19.1796 14.7732 18.8881 14.592L16.4178 13.056Z">
                </path>
              </svg>
            </div>
            <div class="content_con">
              <div class="content_subsection">
                <div class="content_links" style="gap: 5px 36px">
                  <div class="links_wrapper link_item" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
                    @mouseleave="mouseEnterHandle"
                    @click="clickbox('MGA Infrastructure', 'Full-stack infrastructure to launch and scale your program')">
                    <div class="gatsby-image">
                      <div>
                        <img aria-hidden="true" data-placeholder-image="" style="
                            width: 80%;
                            opacity: 1;
                            transition: opacity 500ms linear 0s;
                            object-fit: cover;
                            max-width: 71px;
                            display: block;
                          " decoding="async"
                          src=""
                          alt="" />
                      </div>
                    </div>
                    <div class="link_head">
                      {{ $t("headMenu1Head2") }}
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_desc">
                      {{ $t("headMenu1Desc2") }}
                    </div>
                  </div>
                  <div class="links_wrapper link_item" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
                    @mouseleave="mouseEnterHandle"
                    @click="clickbox('Policy Admin System', 'Get API-driven technology for digital management of your full policy lifecycle')">
                    <div class="gatsby-image">
                      <div>
                        <img aria-hidden="true" data-placeholder-image="" style="
                            width: 80%;
                            opacity: 1;
                            transition: opacity 500ms linear 0s;
                            object-fit: cover;
                            max-width: 71px;
                            display: block;
                          " decoding="async"
                          src=""
                          alt="" />
                      </div>
                    </div>
                    <div class="link_head">
                      {{ $t("headMenu1Head3") }}
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_desc">
                      {{ $t("headMenu1Desc3") }}
                    </div>
                  </div>
                  <div class="links_wrapper link_item" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
                    @mouseleave="mouseEnterHandle"
                    @click="clickbox('Data Insights', 'Access real-time performance data for better decision-making')">
                    <div class="gatsby-image">
                      <div>
                        <img aria-hidden="true" data-placeholder-image="" style="
                            width: 80%;
                            opacity: 1;
                            transition: opacity 500ms linear 0s;
                            object-fit: cover;
                            max-width: 71px;
                            display: block;
                          " decoding="async"
                          src=""
                          alt="" />
                      </div>
                    </div>
                    <div class="link_head">
                      {{ $t("headMenu1Head4") }}
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_desc">
                      {{ $t("headMenu1Desc4") }}
                    </div>
                  </div>
                  <div class="links_wrapper link_item" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
                    @mouseleave="mouseEnterHandle"
                    @click="clickbox('Agency Management Portal', 'Monitor, transact, and manage your Boost program from a single user interface')">
                    <div class="gatsby-image">
                      <div>
                        <img aria-hidden="true" data-placeholder-image="" style="
                            width: 80%;
                            opacity: 1;
                            transition: opacity 500ms linear 0s;
                            object-fit: cover;
                            max-width: 71px;
                            display: block;
                          " decoding="async"
                          src=""
                          alt="" />
                      </div>
                    </div>
                    <div class="link_head">
                      {{ $t("headMenu1Head5") }}
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_desc">
                      {{ $t("headMenu1Desc5") }}
                    </div>
                  </div>
      
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      ----------------------------------------------  -->
      <div class="headerDropdown">
        <div class="dropdownButton">
          {{ $t('headMenu2') }}
          <svg viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="dropdown_icon">
            <path d="M1 0.867188L4.12445 3.99187C4.20255 4.06998 4.32919 4.06998 4.4073 3.99187L7.53198 0.867188">
            </path>
          </svg>
        </div>
        <div class="dropdown_container">
          <div class="content_wrapper">
            <div class="content_title">
              <svg viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg" class="boost_logo">
                <path
                  d="M8.34198 0.981145C9.13312 0.487879 10.1363 0.489123 10.9262 0.984351L19.6294 6.4407C20.7928 7.17008 20.7896 8.86615 19.6235 9.59118L10.6131 15.1935C10.014 15.566 9.25557 15.5669 8.65561 15.1958L4.91518 12.8821C3.88834 12.2469 3.88834 10.7534 4.91518 10.1183L8.65561 7.80459C9.25556 7.43348 10.014 7.43436 10.6131 7.80686L14.3393 10.1237C14.4245 10.1766 14.4894 10.2681 14.4553 10.3625C14.3373 10.6891 13.7493 11.0312 13.2191 11.0211C13.1656 11.0201 13.1142 11.002 13.0687 10.9737L9.87766 8.98966C9.72789 8.89654 9.53828 8.89632 9.38829 8.98909L5.64786 11.3028C5.50117 11.3935 5.50117 11.6069 5.64786 11.6976L9.38829 14.0113C9.53828 14.104 9.72789 14.1038 9.87766 14.0107L18.8881 8.40838C19.1796 8.22712 19.1804 7.8031 18.8895 7.62076L10.1864 2.16441C9.84789 1.95217 9.41794 1.95163 9.07888 2.16303L1.99708 6.59044C1.8859 6.65995 1.74482 6.65999 1.6336 6.59055L0.732883 6.02822C0.625346 5.96108 0.625305 5.8045 0.732806 5.73731L8.34198 0.981145Z">
                </path>
                <path
                  d="M16.4178 13.056C16.3515 13.0148 16.2988 12.9525 16.2822 12.8762C16.1581 12.3039 16.6751 11.9663 17.0241 11.8819C17.0961 11.8644 17.1705 11.884 17.2334 11.9231L19.6235 13.4092C20.7896 14.1342 20.7928 15.8303 19.6294 16.5597L10.9269 22.0156C10.1365 22.5111 9.13263 22.5121 8.34134 22.018L0.73301 17.2677C0.625443 17.2006 0.625445 17.0439 0.733014 16.9768L1.63331 16.4147C1.74448 16.3453 1.88546 16.3453 1.99662 16.4147L9.07897 20.8366C9.41809 21.0483 9.84833 21.0479 10.1871 20.8355L18.8895 15.3796C19.1804 15.1973 19.1796 14.7732 18.8881 14.592L16.4178 13.056Z">
                </path>
              </svg>
              {{ $t('headMenu2') }}
            </div>
            <div class="content_con">
              <div class="content_subsection">
                <div class="content_links">
                  <div class="links_wrapper link_item" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
                    @mouseleave="mouseEnterHandle"
                    @click="clickbox('MGA Infrastructure', 'Full-stack infrastructure to launch and scale your program')">
                    <div class="gatsby-image">
                      <div>
                        <img aria-hidden="true" data-placeholder-image="" style="
                            width: 80%;
                            opacity: 1;
                            transition: opacity 500ms linear 0s;
                            object-fit: cover;
                            max-width: 71px;
                            display: block;
                          " decoding="async"
                          src=""
                          alt="" />
                      </div>
                    </div>
                    <div class="link_head">
                      {{ $t("headMenu2Head1") }}
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_desc">
                      {{ $t("headMenu2Desc1") }}
                    </div>
                  </div>
                  <div class="links_wrapper link_item" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
                    @mouseleave="mouseEnterHandle"
                    @click="clickbox('Policy Admin System', 'Get API-driven technology for digital management of your full policy lifecycle')">
                    <div class="gatsby-image">
                      <div>
                        <img aria-hidden="true" data-placeholder-image="" style="
                            width: 80%;
                            opacity: 1;
                            transition: opacity 500ms linear 0s;
                            object-fit: cover;
                            max-width: 71px;
                            display: block;
                          " decoding="async"
                          src=""
                          alt="" />
                      </div>
                    </div>
                    <div class="link_head">
                      {{ $t("headMenu2Head2") }}
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_desc">
                      {{ $t("headMenu2Desc2") }}
                    </div>
                  </div>
                  <div class="links_wrapper link_item" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
                    @mouseleave="mouseEnterHandle"
                    @click="clickbox('Policy Admin System', 'Get API-driven technology for digital management of your full policy lifecycle')">
                    <div class="gatsby-image">
                      <div>
                        <img aria-hidden="true" data-placeholder-image="" style="
                            width: 80%;
                            opacity: 1;
                            transition: opacity 500ms linear 0s;
                            object-fit: cover;
                            max-width: 71px;
                            display: block;
                          " decoding="async"
                          src=""
                          alt="" />
                      </div>
                    </div>
                    <div class="link_head">
                      {{ $t("headMenu2Head3") }}
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_desc">
                      {{ $t("headMenu2Desc3") }}
                    </div>
                  </div>
                  <div class="links_wrapper link_item" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
                    @mouseleave="mouseEnterHandle"
                    @click="clickbox('Policy Admin System', 'Get API-driven technology for digital management of your full policy lifecycle')">
                    <div class="gatsby-image">
                      <div>
                        <img aria-hidden="true" data-placeholder-image="" style="
                            width: 80%;
                            opacity: 1;
                            transition: opacity 500ms linear 0s;
                            object-fit: cover;
                            max-width: 71px;
                            display: block;
                          " decoding="async"
                          src=""
                          alt="" />
                      </div>
                    </div>
                    <div class="link_head">
                      <div  v-html="$t('headMenu2Head4')"></div>
                      <!-- {{ $t("headMenu2Head4") }} -->
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_desc">
                      {{ $t("headMenu2Desc4") }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      -----------------------------  -----  -->
      <div class="headerDropdown">
        <div class="dropdownButton">
          {{ $t('headMenu3') }}
          <svg viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="dropdown_icon">
            <path d="M1 0.867188L4.12445 3.99187C4.20255 4.06998 4.32919 4.06998 4.4073 3.99187L7.53198 0.867188">
            </path>
          </svg>
        </div>
        <div class="dropdown_container">
          <div class="content_wrapper">
            <div class="content_title">
              <svg viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg" class="boost_logo">
                <path
                  d="M8.34198 0.981145C9.13312 0.487879 10.1363 0.489123 10.9262 0.984351L19.6294 6.4407C20.7928 7.17008 20.7896 8.86615 19.6235 9.59118L10.6131 15.1935C10.014 15.566 9.25557 15.5669 8.65561 15.1958L4.91518 12.8821C3.88834 12.2469 3.88834 10.7534 4.91518 10.1183L8.65561 7.80459C9.25556 7.43348 10.014 7.43436 10.6131 7.80686L14.3393 10.1237C14.4245 10.1766 14.4894 10.2681 14.4553 10.3625C14.3373 10.6891 13.7493 11.0312 13.2191 11.0211C13.1656 11.0201 13.1142 11.002 13.0687 10.9737L9.87766 8.98966C9.72789 8.89654 9.53828 8.89632 9.38829 8.98909L5.64786 11.3028C5.50117 11.3935 5.50117 11.6069 5.64786 11.6976L9.38829 14.0113C9.53828 14.104 9.72789 14.1038 9.87766 14.0107L18.8881 8.40838C19.1796 8.22712 19.1804 7.8031 18.8895 7.62076L10.1864 2.16441C9.84789 1.95217 9.41794 1.95163 9.07888 2.16303L1.99708 6.59044C1.8859 6.65995 1.74482 6.65999 1.6336 6.59055L0.732883 6.02822C0.625346 5.96108 0.625305 5.8045 0.732806 5.73731L8.34198 0.981145Z">
                </path>
                <path
                  d="M16.4178 13.056C16.3515 13.0148 16.2988 12.9525 16.2822 12.8762C16.1581 12.3039 16.6751 11.9663 17.0241 11.8819C17.0961 11.8644 17.1705 11.884 17.2334 11.9231L19.6235 13.4092C20.7896 14.1342 20.7928 15.8303 19.6294 16.5597L10.9269 22.0156C10.1365 22.5111 9.13263 22.5121 8.34134 22.018L0.73301 17.2677C0.625443 17.2006 0.625445 17.0439 0.733014 16.9768L1.63331 16.4147C1.74448 16.3453 1.88546 16.3453 1.99662 16.4147L9.07897 20.8366C9.41809 21.0483 9.84833 21.0479 10.1871 20.8355L18.8895 15.3796C19.1804 15.1973 19.1796 14.7732 18.8881 14.592L16.4178 13.056Z">
                </path>
              </svg>
              {{ $t('headMenu3') }}
            </div>
            <div class="content_con">
              <div class="content_subsection">
                <div class="content_links content_links_n">
                  <div class="links_wrapper link_item" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
                    @mouseleave="mouseEnterHandle"
                    @click="clickbox('MGA Infrastructure', 'Full-stack infrastructure to launch and scale your program')">
                    <div class="gatsby-image">
                      <div>
                        <img aria-hidden="true" data-placeholder-image="" style="
                            width: 80%;
                            opacity: 1;
                            transition: opacity 500ms linear 0s;
                            object-fit: cover;
                            max-width: 71px;
                            display: block;
                          " decoding="async"
                          src=""
                          alt="" />
                      </div>
                    </div>
                    <div class="link_head">
                      {{ $t("headMenu3Head1") }}
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_desc">
                      {{ $t("headMenu3Desc1") }}
                    </div>
                  </div>
                  <div class="links_wrapper link_item" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
                    @mouseleave="mouseEnterHandle"
                    @click="clickbox('Policy Admin System', 'Get API-driven technology for digital management of your full policy lifecycle')">
                    <div class="gatsby-image">
                      <div>
                        <img aria-hidden="true" data-placeholder-image="" style="
                            width: 80%;
                            opacity: 1;
                            transition: opacity 500ms linear 0s;
                            object-fit: cover;
                            max-width: 71px;
                            display: block;
                          " decoding="async"
                          src=""
                          alt="" />
                      </div>
                    </div>
                    <div class="link_head">
                      {{ $t("headMenu3Head2") }}
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_desc">
                      {{ $t("headMenu3Desc2") }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
            <!--      -----------------------------  -----  -->
      <div class="headerDropdown">
        <div class="dropdownButton">
          {{ $t('headMenu4') }}
          <svg viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="dropdown_icon">
            <path d="M1 0.867188L4.12445 3.99187C4.20255 4.06998 4.32919 4.06998 4.4073 3.99187L7.53198 0.867188">
            </path>
          </svg>
        </div>
        <div class="dropdown_container">
          <div class="content_wrapper">
            <div class="content_title">
              <svg viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg" class="boost_logo">
                <path
                  d="M8.34198 0.981145C9.13312 0.487879 10.1363 0.489123 10.9262 0.984351L19.6294 6.4407C20.7928 7.17008 20.7896 8.86615 19.6235 9.59118L10.6131 15.1935C10.014 15.566 9.25557 15.5669 8.65561 15.1958L4.91518 12.8821C3.88834 12.2469 3.88834 10.7534 4.91518 10.1183L8.65561 7.80459C9.25556 7.43348 10.014 7.43436 10.6131 7.80686L14.3393 10.1237C14.4245 10.1766 14.4894 10.2681 14.4553 10.3625C14.3373 10.6891 13.7493 11.0312 13.2191 11.0211C13.1656 11.0201 13.1142 11.002 13.0687 10.9737L9.87766 8.98966C9.72789 8.89654 9.53828 8.89632 9.38829 8.98909L5.64786 11.3028C5.50117 11.3935 5.50117 11.6069 5.64786 11.6976L9.38829 14.0113C9.53828 14.104 9.72789 14.1038 9.87766 14.0107L18.8881 8.40838C19.1796 8.22712 19.1804 7.8031 18.8895 7.62076L10.1864 2.16441C9.84789 1.95217 9.41794 1.95163 9.07888 2.16303L1.99708 6.59044C1.8859 6.65995 1.74482 6.65999 1.6336 6.59055L0.732883 6.02822C0.625346 5.96108 0.625305 5.8045 0.732806 5.73731L8.34198 0.981145Z">
                </path>
                <path
                  d="M16.4178 13.056C16.3515 13.0148 16.2988 12.9525 16.2822 12.8762C16.1581 12.3039 16.6751 11.9663 17.0241 11.8819C17.0961 11.8644 17.1705 11.884 17.2334 11.9231L19.6235 13.4092C20.7896 14.1342 20.7928 15.8303 19.6294 16.5597L10.9269 22.0156C10.1365 22.5111 9.13263 22.5121 8.34134 22.018L0.73301 17.2677C0.625443 17.2006 0.625445 17.0439 0.733014 16.9768L1.63331 16.4147C1.74448 16.3453 1.88546 16.3453 1.99662 16.4147L9.07897 20.8366C9.41809 21.0483 9.84833 21.0479 10.1871 20.8355L18.8895 15.3796C19.1804 15.1973 19.1796 14.7732 18.8881 14.592L16.4178 13.056Z">
                </path>
              </svg>
              {{ $t('headMenu4') }}
            </div>
            <div class="content_con">
              <div class="content_subsection">
                <div class="content_links content_links_n">
                  <div class="links_wrapper link_item" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
                    @mouseleave="mouseEnterHandle"
                    @click="clickbox('MGA Infrastructure', 'Full-stack infrastructure to launch and scale your program')">
                    <div class="gatsby-image">
                      <div>
                        <img aria-hidden="true" data-placeholder-image="" style="
                            width: 80%;
                            opacity: 1;
                            transition: opacity 500ms linear 0s;
                            object-fit: cover;
                            max-width: 71px;
                            display: block;
                          " decoding="async"
                          src=""
                          alt="" />
                      </div>
                    </div>
                    <div class="link_head">
                      {{ $t("headMenu4Head1") }}
                      <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="head_icon">
                        <path
                          d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
                        </path>
                      </svg>
                    </div>
                    <div class="link_desc">
                      {{ $t("headMenu4Desc1") }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="topBtn" @click="drawer = true">
      <img src="../../../assets/more.png" alt="">
    </div>
    <el-drawer class="drawerBox" size="100%" v-model="drawer" title="I am the title" :with-header="false">
      <div class="mainbox">
        <div class="topbox">
          <div class="left" v-html="$t('headButton')"></div>
          <div class="right" @click="drawer = false">
            <img src="../../../assets/close2.png" alt="">
          </div>
        </div>

        <div class="line"></div>
        <div class="biaoti">{{ $t("headMenu1") }}</div>
        <div class="centreBox">
          <!-- <div class="topbox2">
            <div class="left">
              <img
                src=""
                alt="Overview">
            </div>
            <div class="right">
              <div class="title">{{ $t("headMenu1Head1") }}</div>
              <div class="text">{{ $t("headMenu1Desc1") }}</div>
            </div>
          </div> 
          <div class="box">
            <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div>
            <div class="right">
              <div class="title">{{ $t("headMenu1Head1") }}</div>
            </div>
          </div> -->
          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title">{{ $t("headMenu1Head1") }}</div>
            </div>
          </div>
          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title">{{ $t("headMenu1Head2") }}</div>
            </div>
          </div>
          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title">{{ $t("headMenu1Head3") }}</div>
            </div>
          </div>
          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title">{{ $t("headMenu1Head4") }}</div>
            </div>
          </div>
          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title">{{ $t("headMenu1Head5") }}</div>
            </div>
          </div>
        </div>

        <div class="line"></div>
        <div class="biaoti">{{ $t("headMenu2") }}</div>
        <!-- <div class="div-with-dashed-line"></div> -->
        <div class="centreBox">

          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title">{{ $t("headMenu2Head1") }}</div>
            </div>
          </div>
          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title">{{ $t("headMenu2Head2") }}</div>
            </div>
          </div>
          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title">{{ $t("headMenu2Head3") }}</div>
            </div>
          </div>
          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title" v-html="$t('headMenu2Head4')"></div>
            </div>
          </div>
        </div>

        <div class="line"></div>
        <div class="biaoti">{{ $t("headMenu3") }}</div>
        <!-- <div class="div-with-dashed-line"></div> -->
        <div class="centreBox">

          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title">{{ $t("headMenu3Head1") }}</div>
            </div>
          </div>
          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title">{{ $t("headMenu3Head2") }}</div>
            </div>
          </div>
        </div>

        <div class="line"></div>
        <div class="biaoti">{{ $t("headMenu4") }}</div>
        <!-- <div class="div-with-dashed-line"></div> -->
        <div class="centreBox">

          <div class="box">
            <!-- <div class="left">
              <img src="../../../assets/fifi_icon.webp" alt="">
            </div> -->
            <div class="right">
              <div class="title">{{ $t("headMenu4Head1") }}</div>
            </div>
          </div>

        </div>
      </div>
    </el-drawer>
    <a class="secondary" @mouseenter="mouseEnterHandle" @mouseleave="mouseLeaveHandle" href="/" style="
        fill: rgb(255, 255, 250);
        color: rgb(255, 255, 250);
        --progress: 0%;
      ">
      <div v-html="$t('headButton')"></div>
    </a>
  </div>
</template>
<script setup>
import { mouseEnterHandle, mouseLeaveHandle } from '@/utils/mouse.js'
import {  ref } from 'vue';
const drawer = ref(false)
const emit = defineEmits(['sendData']);


const clickbox = (e, f) => {
  let obj = {
    ob1: e,
    ob2: f
  }
  console.log('obj', obj)
  emit('sendData', obj);
};
</script>

<style scoped lang="less">
:root {
  --progress: 0%;
}

// menu
.header_wrapper {
  display: grid;
  grid-template-columns: min-content auto min-content;
  -webkit-box-align: center;
  align-items: center;
  position: absolute;
  z-index: 9;
  width: 100vw;
  transform: translate(0px);
  height: 42px;
  padding: 0px 112px;
  top: 50px;

  .topBtn {
    display: none;
  }

  .el-overlay {
    width: 80%;
    height: 100%;
  }

  @media screen and (min-width: 1025px) {
    height: 2.917vw;
    padding: 0px 7.778vw;
    top: 1.472vw;

  }

  @media screen and (min-width: 501px) and (max-width: 1024px) {
    height: 10.667vw;

    top: 0vw;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    position: absolute;
    padding: 0 20px 0;
    overflow-y: scroll;

    .topBtn {
      display: block;
      width: 30px;
      height: 30px;
      border: 1px solid #ccc;
      border-radius: 50%;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    :deep(.el-overlay) {
      width: 100%;
      height: 100vh;

      .drawerBox {
        width: 100%;
        background: rgb(0, 32, 37);
        color: #aaa;

        .el-drawer__body {
          /* width: 50%;
          position: absolute;
          right: 0px;*/
          .mainbox {
            .div-with-dashed-line {
              position: relative;
              margin: 15px 0;
              /* 外边距 */
              font-size: 1.6vw;
              color: rgb(125, 143, 146);
              width: 100%;
              /* 容器宽度 */
              white-space: nowrap;
              /* 文本不换行 */
              overflow: hidden;
              /* 超出部分隐藏 */
            }

            .div-with-dashed-line::before {
              content: 'Commercial Lines';
              /* 前面固定的几个字 */
              display: inline-block;
              color: rgb(125, 143, 146);
            }

            .div-with-dashed-line::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 130px;
              /* 固定文本宽度加一些边距 */
              width: calc(100% - 130px);
              /* 虚线的长度，和固定文本宽度相对应 */
              border-bottom: 1px dashed rgb(36, 67, 72);
            }

            .biaoti {
              font-family: Gellix;
              font-weight: 600;
              font-size: 2.46vw;
              letter-spacing: 0.08em;
              line-height: 125%;
              text-transform: uppercase;
              color: rgb(125, 143, 146);
            }

            .centreBox {
              display: flex;
              flex-wrap: wrap;
              /* 允许换行 */
              width: 100%;

              .topbox2 {

                width: 75%;
                height: 12vw;
                display: flex;
                align-items: center;
                margin: 3vw 0;

                .left {
                  width: 20%;
                  margin-right: 15px;

                  img {
                    width: 8vw;
                    height: 8vw;
                    display: block;
                  }
                }

                .right {
                  .title {
                    font-size: 3.2vw;
                    font-family: Gellix;
                    font-weight: 500;
                    letter-spacing: -0.01em;
                    color:#fff;
                    // -webkit-text-fill-color: transparent;
                    flex-shrink: 9999;
                    // background: linear-gradient(100.7deg, rgb(48, 215, 241) 8.74%, rgb(121, 250, 75) 92.06%) 0% 0% / 100% text;
                  
                  }

                  .text {
                    font-size: 1.6vw;
                  }
                }
              }

              .box {
                width: 49.5%;
                height: 8vw;
                display: flex;
                align-items: center;

                .left {
                  width: 20%;
                  margin-right: 15px;

                  img {
                    width: 5vw;
                    height: 5vw;
                    display: block;
                  }
                }

                .right {
                  .title {
                    font-size: 1.95vw;
                    font-family: Gellix;
                    font-weight: 500;
                    letter-spacing: -0.01em;
                    // -webkit-text-fill-color: transparent;
                    flex-shrink: 9999;
                    color:#fff;
                    // background: linear-gradient(100.7deg, rgb(48, 215, 241) 8.74%, rgb(121, 250, 75) 92.06%) 0% 0% / 100% text;
                  }
                }
              }
            }

            .line {
              width: 100%;
              height: 1px;
              border-bottom: 1px dashed rgb(36, 67, 72);
              margin: 3vw 0;
            }

            .topbox {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .left {
                width: 33vw;
                height: 6vw;
                display: flex;
                justify-content: center;
                align-items: center;
                /* border: 1px solid #ccc;*/
                background: linear-gradient(277.33deg, rgb(252, 227, 68) -2.48%, rgb(121, 250, 75) 47.21%, rgb(48, 215, 241) 93.62%) center center / calc(100% + 6px);
                border: 1px solid transparent;
                font-family: Gellix;
                font-weight: 500;
                color: #000;
                border-radius: 5vw;
              }

              .right {
                width: 5vw;
                height: 5vw;
                border-radius: 50%;
                border: 1px solid #ccc;
                display: flex;
                justify-content: center;
                align-items: center;
                border-width: 1px;
                border-style: solid;
                border-color: transparent;
                border-image: initial;
                background: linear-gradient(277.33deg, rgb(252, 227, 68) -2.48%, rgb(121, 250, 75) 47.21%, rgb(48, 215, 241) 93.62%) center center / 120% 120% no-repeat;
                background-position: center center;

                /* mask: linear-gradient(rgb(255, 255, 255) 0px,
              rgb(255, 255, 255) 0px) padding-box exclude,
                linear-gradient(rgb(255, 255, 255) 0px,
                rgb(255, 255, 255) 0px); */
                img {
                  width: 80%;
                  height: 80%;
                  display: block;
                }
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 500px) {
    height: 5.371vw;
    padding: 0px 1.953vw;
    top: 0.1vw;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    position: absolute;
  }

  .logo {
    cursor: pointer;
    fill: rgb(12, 97, 111);
    width: 152px;
    margin-right: 57px;
    &::after{
      font-size:1vw;
      position: absolute;
      content:'InsBean';
      color:#fff;
      top: 50%;
      transform: translate(0,-50%);
    }
    @media screen and (min-width: 1025px) {
      width: 4vw;
      margin-right: 10vw;
      &::after{
        font-size:2vw;
      }
    }
    position: relative;
    
  }

  .desktopMenu {
    display: flex;
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.3s ease-in-out 0s;
    gap: 30px;

    @media screen and (min-width: 1025px) {
      gap: 2vw;
    }

    .w1024None();

    .headerDropdown {
      position: relative;

      .dropdownButton {
        stroke: rgb(255, 255, 250);
        color: rgb(255, 255, 250);
        background: transparent;
        border: none;
        font-family: Gellix;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: -0.01em;
        line-height: 130%;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        cursor: pointer;
        height: 50px;
        padding-right: 30px;
        padding-left: 20px;

        @media screen and (min-width: 1025px) {
          font-size: 0.972vw;
        }

        .dropdown_icon {
          transform: rotateX(0deg);
          transition: transform 0.35s ease-in-out 0s;
          width: 7px;
          margin-left: 4px;

          @media screen and (min-width: 1025px) {
            width: 0.486vw;
            margin-left: 0.278vw;
          }
        }
      }

      .dropdownButton:hover {
        .dropdown_icon {
          transform: rotateX(180deg);
        }

        .content_wrapper {
          transform: translate(0px, 0px);
        }
      }

      /*.dropdownButton:hover .dropdown_container {
        background-color: #79fa4b !important;
      }*/

      .dropdown_container {
        box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 80px;
        //visibility: hidden;
        height: auto;
        width: auto;
        background-color: rgb(0, 32, 37);
        position: absolute;
        display: flex;
        overflow: hidden;
        z-index: 9;
        top: calc(100% + 28px);
        left: -25px;
        border-radius: 15px;

        top: 100%;
        /* 根据实际布局调整 */
        opacity: 0;
        transform: translateY(-20px);
        /* 或者使用 translate(0, -20px) 根据实际需要 */
        pointer-events: none;
        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;

        @media screen and (min-width: 1025px) {
          top: 3vw;
          left: -1.736vw;
          border-radius: 1.042vw;
        }

        .content_wrapper {
          translate: none;
          rotate: none;
          scale: none;
          //transform: translate(0px, -100px);
          display: flex;
          flex-direction: column;

          .content_title {
            border-bottom: 1px dashed rgb(36, 67, 72);
            display: flex;
            color: rgb(125, 143, 146);
            font-family: Gellix;
            font-weight: 600;
            font-size: 11px;
            letter-spacing: 0.06em;
            line-height: 125%;
            -webkit-box-align: center;
            align-items: center;
            text-transform: uppercase;
            flex-shrink: 0;
            padding: 0px 36px;
            height: 68px;
            gap: 15px;

            @media screen and (min-width: 1025px) {
              padding: 0px 2.5vw;
              height: 4.722vw;
              gap: 1.042vw;
              font-size: 0.764vw;
            }

            .boost_logo {
              fill: rgb(125, 143, 146);
              width: 20px;

              @media screen and (min-width: 1025px) {
                width: 1.389vw;
              }
            }

            .title_svg_1 {
              fill: rgb(125, 143, 146);
              width: 20px;

              @media screen and (min-width: 1025px) {
                width: 1.389vw;
              }

              &:nth-child(1) {
                display: none;
              }
            }
          }

          .content_con {
            -webkit-box-flex: 1;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            -webkit-box-pack: end;
            justify-content: flex-end;

            .content_subsection {
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              -webkit-box-flex: 1;
              flex-grow: 1;
              flex-shrink: 0;
              padding: 20px 18px;
              border: none;

              .content_links {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto;
                grid-auto-flow: row;
                gap: 5px 36px;

                .links_wrapper {
                  display: grid;
                  text-decoration: none;
                  position: relative;
                  --progress: 100%;
                  -webkit-box-align: center;
                  align-items: center;
                  gap: 4px 12px;
                  padding: 18px 20px 20px 16px;
                  min-height: 92px;
                  grid-template-columns: 1fr;
                  grid-template-rows: auto;
                  -webkit-box-flex: 1;
                  flex-grow: 1;
                  -webkit-box-pack: justify;
                  justify-content: space-between;

                  @media screen and (min-width: 1025px) {
                    gap: 0.278vw 0.833vw;
                    padding: 1.25vw 1.389vw 1.389vw 1.111vw;
                    min-height: 6.389vw;
                  }

                  .link_linkDesc {
                    font-family: Gellix;
                    font-weight: 400;
                    font-size: 12px;
                    letter-spacing: 0px;
                    line-height: 130%;
                    color: rgb(125, 143, 146);
                    overflow: hidden;
                    align-self: flex-start;
                    width: 235px;
                    max-height: 32px;

                    @media screen and (min-width: 1025px) {
                      width: 16.319vw;
                      max-height: 2.222vw;
                      font-size: 0.833vw;
                    }
                  }
                }

                /* .links_wrapper::after::before{
                  opacity: 1;
                }
                .links_wrapper:hover{
                  --progress: 0%;
                } */
                .link_item {
                  display: grid;
                  grid-template-columns: auto auto;
                  grid-template-rows: auto auto auto;
                  text-decoration: none;
                  position: relative;
                  --progress: 100%;
                  -webkit-box-align: center;
                  align-items: center;
                  gap: 4px 12px;
                  padding: 18px 20px 20px 16px;
                  min-height: 92px;
                  cursor: pointer;

                  @media screen and (min-width: 1025px) {
                    gap: 0.278vw 0.833vw;
                    padding: 1.25vw 1.389vw 1.389vw 1.111vw;
                    min-height: 6.389vw;
                  }

                  .gatsby-image {
                    object-fit: contain;
                    grid-row: span 2;
                    width: 35px;
                    max-width: none;
                    height: 35px;
                    display: inline-block;
                    vertical-align: top;
                    position: relative;
                    overflow: hidden;

                    @media screen and (min-width: 1025px) {
                      width: 2.431vw;
                      height: 2.431vw;
                    }
                  }

                  .link_head {
                    font-family: Gellix;
                    font-weight: 500;
                    font-size: 14px;
                    letter-spacing: -0.01em;
                    line-height: 130%;
                    -webkit-text-fill-color: transparent;
                    display: flex;
                    -webkit-box-align: center;
                    align-items: center;
                    align-self: flex-end;
                    background: linear-gradient(100.7deg,
                        rgb(48, 215, 241) 8.74%,
                        rgb(121, 250, 75) 92.06%) 0% 0% / 100% text;
                    white-space: pre;

                    .head_icon {
                      fill: rgb(121, 250, 75);
                      transition: all 0.2s ease-in-out 0s;
                      width: 16px;
                      margin-left: 5px;

                      @media screen and (min-width: 1025px) {
                        width: 1.111vw;
                        margin-left: 0.347vw;
                      }
                    }
                  }

                  .link_desc {
                    font-family: Gellix;
                    font-weight: 400;
                    font-size: 12px;
                    letter-spacing: 0px;
                    line-height: 130%;
                    color: rgb(125, 143, 146);
                    overflow: hidden;
                    align-self: flex-start;
                    width: 235px;
                    max-height: 32px;

                    @media screen and (min-width: 1025px) {
                      width: 16.319vw;
                      max-height: 2.222vw;
                      font-size: 0.833vw;
                    }
                  }
                }

                .link_item2 {
                  grid-template-columns: auto
                }

                .link_item::after {
                  .afterBorder();
                  transition: all 0.5s;
                  border-radius: 10px;
                }

                .link_item::before {
                  content: '';
                  position: absolute;
                  inset: 0px;
                  background-color: rgb(5, 51, 58);
                  z-index: -1;
                  border-radius: 10px;
                  opacity: 0;
                  transition: opacity 0.2s ease-in-out 0s;
                }

                .link_item:hover::before {
                  opacity: 1;
                }
              }

              .content_links_n {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-auto-flow: row;
                gap: unset;
              }
            }
          }
        }
      }

      .dropdownButton::after {
        content: "";
        top: -20px;
        left: -20px;
        width: 200%;
        bottom: -50px;
        position: absolute;
      }

      .dropdownButton:hover~.dropdown_container,
      .dropdown_container:focus-within {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .dropdown_container:hover {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        /* 可以在这里添加其他需要的样式 */
      }
    }
  }

  .secondary {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.2s ease-in-out 0s;
    width: 100%;
    --progress: 0%;
    font-family: Gellix;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
    line-height: 130%;
    padding: 9px 20px;
    gap: 10px;

    @media screen and (min-width: 1025px) {
      padding: 0.6vw 1.4vw;
      gap: 0.7vw;
    }

    .w1024None();

    & div {
      position: relative;
      width: max-content;
    }

    & div::before {
      .underline();
    }
  }

  .secondary::after {
    .afterBorder();
    transition: all 0.5s;
  }
}

@media screen and (max-width: 500px) {
  .header_wrapper {
    padding: 50px 20px 0;

    /* height: 200vw;
     overflow-y: scroll;*/
    .desktopMenu {
      display: none;
    }

    :deep(.el-overlay) {
      width: 100%;
      height: 100vh;

      .drawerBox {
        width: 100%;
        background: rgb(0, 32, 37);
        color: #aaa;

        .el-drawer__body {
          .mainbox {
            .div-with-dashed-line {
              position: relative;
              margin: 15px 0;
              /* 外边距 */
              font-size: 3.46vw;
              color: rgb(125, 143, 146);
              width: 100%;
              /* 容器宽度 */
              white-space: nowrap;
              /* 文本不换行 */
              overflow: hidden;
              /* 超出部分隐藏 */
            }

            .div-with-dashed-line::before {
              content: 'Commercial Lines';
              /* 前面固定的几个字 */
              display: inline-block;
              color: rgb(125, 143, 146);
            }

            .div-with-dashed-line::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 130px;
              /* 固定文本宽度加一些边距 */
              width: calc(100% - 130px);
              /* 虚线的长度，和固定文本宽度相对应 */
              border-bottom: 1px dashed rgb(36, 67, 72);
            }

            .biaoti {
              font-family: Gellix;
              font-weight: 600;
              font-size: 3.46vw;
              letter-spacing: 0.08em;
              line-height: 125%;
              text-transform: uppercase;
              color: rgb(125, 143, 146);
            }

            .centreBox {
              display: flex;
              flex-wrap: wrap;
              /* 允许换行 */
              width: 100%;

              .topbox2 {

                width: 75%;
                height: 22vw;
                display: flex;
                align-items: center;
                margin: 5vw 0;

                .left {
                  width: 20%;
                  margin-right: 15px;

                  img {
                    width: 15vw;
                    height: 15vw;
                    display: block;
                  }
                }

                .right {
                  .title {
                    font-size: 3.2vw;
                    font-family: Gellix;
                    font-weight: 500;
                    letter-spacing: -0.01em;
                    color:#fff;
                    // -webkit-text-fill-color: transparent;
                    flex-shrink: 9999;
                    // background: linear-gradient(100.7deg, rgb(48, 215, 241) 8.74%, rgb(121, 250, 75) 92.06%) 0% 0% / 100% text;
                  }

                  .text {
                    font-size: 3.2vw;
                  }
                }
              }

              .box {
                width: 49.5%;
                height: 15vw;
                display: flex;
                align-items: center;

                .left {
                  width: 20%;
                  margin-right: 15px;

                  img {
                    width: 10vw;
                    height: 10vw;
                    display: block;
                  }
                }

                .right {
                  .title {
                    font-size: 3.2vw;
                    font-family: Gellix;
                    font-weight: 500;
                    letter-spacing: -0.01em;
                    // -webkit-text-fill-color: transparent;
                    color:#fff;
                    flex-shrink: 9999;
                    // background: linear-gradient(100.7deg, rgb(48, 215, 241) 8.74%, rgb(121, 250, 75) 92.06%) 0% 0% / 100% text;
                  }
                }
              }
            }

            .line {
              width: 100%;
              height: 1px;
              border-bottom: 1px dashed rgb(36, 67, 72);
              margin: 3vw 0;
            }

            .topbox {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .left {
                width: 75vw;
                height: 9vw;
                display: flex;
                justify-content: center;
                align-items: center;
                /* border: 1px solid #ccc;*/
                background: linear-gradient(277.33deg, rgb(252, 227, 68) -2.48%, rgb(121, 250, 75) 47.21%, rgb(48, 215, 241) 93.62%) center center / calc(100% + 6px);
                border: 1px solid transparent;
                font-family: Gellix;
                font-weight: 500;
                color: #000;
                border-radius: 5vw;
              }

              .right {
                width: 8vw;
                height: 8vw;
                border-radius: 50%;
                border: 1px solid #ccc;
                display: flex;
                justify-content: center;
                align-items: center;
                border-width: 1px;
                border-style: solid;
                border-color: transparent;
                border-image: initial;
                background: linear-gradient(277.33deg, rgb(252, 227, 68) -2.48%, rgb(121, 250, 75) 47.21%, rgb(48, 215, 241) 93.62%) center center / 120% 120% no-repeat;
                background-position: center center;

                /* mask: linear-gradient(rgb(255, 255, 255) 0px,
              rgb(255, 255, 255) 0px) padding-box exclude,
                linear-gradient(rgb(255, 255, 255) 0px,
                rgb(255, 255, 255) 0px); */
                img {
                  width: 80%;
                  height: 80%;
                  display: block;
                }
              }
            }
          }
        }
      }
    }

    .topBtn {
      display: block;
      width: 30px;
      height: 30px;
      border: 1px solid #ccc;
      border-radius: 50%;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}

.isDrawer {
  height: 300vw;
  overflow-y: scroll;
  position: absolute;
  right: 0px;
  width: 100%;
}

@media screen and (min-width: 501px) and (max-width: 1024px) {
  .isDrawer {

    width: 50% !important;
  }
  .header_wrapper{
    .logo{
      width: 6vw;
      &::after{
        margin-left: 10px;
        font-size:4vw;
      }
    }
  }
}

@media screen and (max-width: 500px) {
  .header_wrapper{
    .logo{
      width: 10vw;
      &::after{
        margin-left: 10px;
        font-size:6vw;
      }
    }
  }
}
</style>
